<template>
  <div class="app-container">
    <div class="box">
      <div style="display: flex;align-items: center;justify-content: space-between">
        <h4>观看时长奖励设置</h4>
        <el-button type="primary" style="height: 35px;margin-left: 30px;" @click="open = true;type=7">新增层级</el-button>
      </div>
      <el-table v-loading="loading" :data="dataList7" style="margin-top: 20px;">
        <el-table-column label="观看直播超过（小时）" align="center" prop="awardCondition" width="380" :show-overflow-tooltip="true"/>
        <el-table-column label="奖励设置" align="left" prop="awardAmount" width="480" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div style="display:flex;justify-content: space-between;">
              <span>{{scope.row.awardAmount}}</span>
              <el-button size="mini" type="text" icon="el-icon-edit"
                         @click="open=true;editObj=JSON.parse(JSON.stringify(scope.row));type=7">修改</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.conId,7)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="box">
      <div style="display: flex;align-items: center;justify-content: space-between">
        <h4>赠送礼物奖励设置</h4>
        <el-button type="primary" style="height: 35px;margin-left: 30px;" @click="open = true;type=8">新增层级</el-button>
      </div>
      <el-table v-loading="loading" :data="dataList8" style="margin-top: 20px;">
        <el-table-column label="赠送礼物超过($)" align="center" prop="awardCondition" width="380" :show-overflow-tooltip="true"/>
        <el-table-column label="奖励设置" align="left" prop="awardAmount" width="480" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div style="display:flex;justify-content: space-between;">
              <span>{{scope.row.awardAmount}}</span>
              <el-button size="mini" type="text" icon="el-icon-edit"
                         @click="open=true;editObj=JSON.parse(JSON.stringify(scope.row));type=8">修改</el-button>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row.conId,8)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>



    <!--    修改-->
    <el-dialog title="修改" :visible.sync="open" width="500px" append-to-body @close="$refs['formEdit'].clearValidate();editObj={};type=null">
      <el-form ref="formEdit" :model="editObj" label-width="80px">
        <el-form-item label="条件" prop="awardCondition" :rules="[{required: true,message: '条件不能为空',trigger: 'blur'}]">
          <el-input v-model="editObj.awardCondition" placeholder="请输入累计奖励"/>
        </el-form-item>
        <el-form-item label="值" prop="awardAmount" :rules="[{required: true,message: '值不能为空',trigger: 'blur'}]">
          <el-input v-model="editObj.awardAmount" placeholder="请输入返利"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEdit(editObj)">确 定</el-button>
        <el-button @click="open=false;">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {anchorRewardConfig, anchorRewardConfigAdd, anchorRewardConfigDel} from "@/api/live/anchorAuthority";

export default {
  data() {
    return {
      dataList7:[],
      dataList8:[],
      loading:false,
      editObj:{},
      open:false,
      type:null,
    }
  },
  created() {
    this.loading = true
    for (let i = 7; i <= 8; i++) {
      this.getList(i)
    }
    this.loading = false
  },
  methods: {
    async getList(type){
      await anchorRewardConfig(type).then(res => {
        this['dataList'+type] = res.data
      })
    },
    /** 修改 */
    handleEdit(row){
      row.awardType = this.type;
      anchorRewardConfigAdd(row).then(res => {
        this.$modal.msgSuccess("修改成功");
        this.getList(this.type)
        this.open = false
      })
    },
    // 删除
    handleDelete(id,type){
      this.$modal.confirm('是否确认删除该条数据？').then(function() {
        return anchorRewardConfigDel(id)
      }).then(() => {
        this.$modal.msgSuccess('删除成功')
        this.getList(type)
      })
    },
  }
}
</script>

<style scoped lang="scss">
.app-container{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.box{
  margin-bottom: 50px;
}
</style>
